<template>
  <div class="search">
    <el-card class="search-view" shadow="hover">
      <template #header>
        <h4>关键词搜索</h4>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <MoreFilled />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <div class="search-chart">
        <div class="search-chart-line">
          <h5 class="line-title">搜索用户数</h5>
          <div class="line-count">{{ numberFormat(lineChartData.uTotal) }}</div>
          <v-chart :option="getLineOption('userList', '搜索用户数')"></v-chart>
        </div>
        <div class="search-chart-line">
          <h5 class="line-title">搜索量</h5>
          <div class="line-count">{{ numberFormat(lineChartData.cTotal) }}</div>
          <v-chart :option="getLineOption('countList', '搜索量')"></v-chart>
        </div>
      </div>
      <el-table :data="tableData">
        <el-table-column
          label="排名"
          prop="rankNo"
          width="60"
        ></el-table-column>
        <el-table-column label="关键字" prop="word"></el-table-column>
        <el-table-column label="搜索数量" prop="count"></el-table-column>
        <el-table-column label="搜索用户数" prop="user"></el-table-column>
        <el-table-column label="搜索占比" prop="rang"></el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="tableTotalData.length"
        v-model:current-page="currentPage"
        :page-size="pageSize"
      />
    </el-card>
    <el-card class="search-view" shadow="hover">
      <template #header>
        <h4>分类销售排行</h4>
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="商品">商品</el-radio-button>
          <el-radio-button label="分类">分类</el-radio-button>
        </el-radio-group>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Search',
};
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();
const tabPosition = ref('商品');
const currentPage = ref(1);
const pageSize = ref(5);

// 1. 获取搜索关键词
const searchWord = computed(() => reportDataStore.reportData.searchWord || []);

// 2. 从searchWord这个计算属性中进一步的处理一下需要渲染的数据
//    添加两个属性rankNo rang
const tableTotalData = computed(() => {
  if (!searchWord.value) return []; // 阻止代码向下执行

  return searchWord.value.map((item, index) => {
    return {
      ...item, // 原来的属性还是用原来的
      rankNo: index + 1,
      rang: ((item.user / item.count) * 100).toFixed(2) + '%',
    };
  });
});

// 3. 实现分页 从原数据tableTotalData当中，不断的进行截取数据进行渲染
const tableData = computed(() => {
  return tableTotalData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
  //0--5  0 1 2 3 4
  //5--10  5 6 7 8 9
  //10--15  10 11 12 13 14
});

// 4. 准备左侧折线图的相关数据  是一个对象，里面有5个属性
const lineChartData = computed(() => {
  const data = {
    wordList: [] as string[], // 存储关键词的数组 是用来渲染X轴的数据的
    userList: [] as number[], // 用户访问量 用来呈现Y轴的数据 左侧折线图
    countList: [] as number[], // 总的搜索量 用来呈现Y轴的数据 右侧折线图
    uTotal: 0, // 总的用户访问量
    cTotal: 0, // 总的数量
  };

  if (tableTotalData.value && tableTotalData.value.length > 0) {
    tableTotalData.value.forEach((item) => {
      data.wordList.push(item.word);
      data.userList.push(item.user);
      data.countList.push(item.count);
      data.cTotal += item.count;
      data.uTotal += item.user;
    });
  }

  return data;
});

// 5. 准备左侧折线图需要用到的参数
const getLineOption = (listName: 'userList' | 'countList', name: string) => {
  return {
    xAxis: {
      // X轴两侧不留白
      boundaryGap: false,
      data: lineChartData.value.wordList, // x轴的数据
    },
    yAxis: {
      show: false,
    },
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
    },
    series: {
      // name: '今日订单',
      type: 'line',
      // data: orderTrend.value,
      data: lineChartData.value[listName],
      // 折线是否平滑
      smooth: true,
      itemStyle: {
        // 去除折线的小圆点
        opacity: 0,
      },
      lineStyle: {
        color: '#5FBBFF',
      },
      areaStyle: {
        // 设置折线区域的颜色
        color: '#c7e7ff',
      },
    },
    tooltip: {
      // x轴上触发
      trigger: 'axis',
      // 限制在图表区域内
      confine: true,
    },
  };
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  .search-view {
    flex: 1;
    cursor: pointer;
    :deep(.el-card__header) {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        font-weight: 500;
      }
    }

    &:first-child {
      margin-right: 10px;
      .search-chart {
        .search-chart-line {
          display: inline-block;
          width: 50%;
          &:first-child {
            padding-right: 5px;
          }
          &:last-child {
            padding-left: 5px;
          }
          h5 {
            padding: 0;
            margin: 0;
            color: #999;
          }
          .line-count {
            font-size: 24px;
            letter-spacing: 1px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
    }
    &:last-child {
      margin-left: 10px;
    }
  }
}
</style>
